<!DOCTYPE HTML>
<html>
<head>
  <title>商品详情</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <!-- jquery -->
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <!-- bootstrap -->
  <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css"/>
  <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
  <!-- jquery-validator -->
  <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script>
  <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
  <!-- layer -->
  <script type="text/javascript" src="/layer/layer.js"></script>
  <!-- md5.js -->
  <script type="text/javascript" src="/js/md5.min.js"></script>
  <!-- common.js -->
  <script type="text/javascript" src="/js/common.js"></script>
  <style type="text/css">
    html, body {
      height: 100%;
      width: 100%;
    }

    body {
      background: url('/img/bg2.jpg') no-repeat;
      background-size: 100% 100%;
    }

    #goodslist td {
      border-top: 1px solid #39503f61;
    }
  </style>
</head>
<body>

<div class="panel panel-default" style="height:100%;background-color:rgba(222,222,222,0.8)">
  <div class="panel-heading">秒杀商品详情</div>
  <div class="panel-body">
    <span id="userTip"> 您还没有登录，请登陆后再操作<br/></span>
    <span>没有收货地址的提示。。。</span>
  </div>
  <table class="table" id="goodslist">
    <tr>
      <td>商品名称</td>
      <td colspan="3" id="goodsName"></td>
    </tr>
    <tr>
      <td>商品图片</td>
      <td colspan="3"><img id="goodsImg" width="200" height="200"/></td>
    </tr>
    <tr>
      <td>秒杀开始时间</td>
      <td id="startTime"></td>
      <td>
        <input type="hidden" id="remainSeconds"/>
        <span id="seckillTip"></span>
      </td>
      <td>
        <div class="row" id="appointed">
            
        </div>
        <input type="hidden" name="goodsId" id="goodsId"/>
      </td>
    </tr>
    <tr>
      <td>商品原价</td>
      <td colspan="3" id="goodsPrice"></td>
    </tr>
    <tr>
      <td>秒杀价</td>
      <td colspan="3" id="seckillPrice"></td>
    </tr>
    <tr>
      <td>库存数量</td>
      <td colspan="3" id="stockCount"></td>
    </tr>
  </table>
</div>
</body>
<script>
const accessToken = localStorage.getItem("accessToken");
const goodsId = getQueryString("skuId");
const promoId = getQueryString("promoId");
let lock = false;
let loaddingLock = false;
let retryCount = 0;
function getSeckillPath() {
  if(lock) return;
  lock = true;
  showLoading();
  $.ajax({
    url: "/seckill/path",
    type: "GET",
    data: {
      skuId: goodsId,
      promoId,
      accessToken
    },
    success: function (data) {
      setTimeout(() => {
        lock = false;
      }, 1500);
      if (data.code == 0) {
        var path = data.data;
        doSeckill(path);
      } else {
        layer.msg(data.msg);
      }
    },
    error: function () {
      layer.msg("客户端请求有误");
    }
  });
}

function subScribe() {
  $.ajax({
    url: "/seckill/subscribe",
    type: 'POST',
    dataType: "json",
    data: {
      accessToken,
      promoId
    },
    success: function(res) {
      if(res && res.data) {
        const btn = document.getElementById("buyButton");
        btn.onclick = getSeckillPath;
        btn.innerHTML = "立即秒杀";
        layer.msg("活动预约成功!");
      } else {
        layer.msg("活动预约失败!");
      }
    },
    error: function(res) {
      console.log(res);
    }
  })
}

function getSeckillResult() {
  if(!loaddingLock) {
    loaddingLock = true;
    showLoading();
  }
  $.ajax({
    url: "/seckill/result",
    type: "GET",
    data: {
      accessToken,
      goodsId
    },
    success: function (data) {
      if (data.code == 0) {
        var result = data.data;
        if (result < 0) {
          layer.msg("对不起，秒杀失败");
        } else if (result === 0 && retryCount < 10){
          setTimeout(getSeckillResult, 100);
          retryCount++;
        } else {
          if(retryCount === 5) result = 1;
          loaddingLock = false;
          layer.msg("成功参加秒杀活动,正在跳转下单结果页面!");
          window.location.href = `/order_detail.htm?orderId=${result}&accessToken=${accessToken}`
        }
      } else {
        layer.msg(data.msg);
      }
    },
    error: function () {
      layer.msg("客户端请求有误");
    }
  });
}

function doSeckill(path) {
  $.ajax({
    url: `/seckill/${path}/do_seckill?accessToken=${accessToken}`,
    type: "POST",
    data: {
      skuId: goodsId,
      promoId
    },
    success: function (data) {
      if (data.code == 0) {
        getSeckillResult(goodsId);
      } else {
        layer.msg(data.msg);
      }
    },
    error: function () {
      layer.msg("客户端请求有误");
    }
  });
}

function render(detail) {
  var remainSeconds = detail.remainSeconds;
  var goods = detail.goods;
  var user = detail.user;
  if (user) {
    $("#userTip").hide();
  }
  $("#goodsName").text(goods.goodsName);
  $("#goodsImg").attr("src", goods.goodsImg);
  $("#startTime").text(new Date(goods.startDate).format("yyyy-MM-dd hh:mm:ss"));
  $("#remainSeconds").val(remainSeconds);
  $("#goodsId").val(goods.id);
  $("#goodsPrice").text(goods.goodsPrice);
  $("#seckillPrice").text(goods.seckillPrice);
  $("#stockCount").text(goods.stockCount);
  countDown();
}

$(function () {
  //countDown();
  getDetail();
});

function getDetail() { 
  $.ajax({
    url: "/seckill/isAppointed",
    type: "GET",
    dataType: 'json',
    data: {
      accessToken,
      promoId
    },
    success: function(res) {
      let name = '立即预约';
      let fn = 'subScribe()';
      if(res && res.data) {
        name = '立即秒杀';
        fn = 'getSeckillPath()';
      }
      const btnStr = `
        <button class="btn btn-primary" id="buyButton" onclick="${fn}">
          ${name}
        </button>`;
      document.getElementById("appointed").innerHTML = btnStr;
    }
  });
  $.ajax({
    url: "/detail/" + goodsId,
    type: "GET",
    success: function (data) {
      if (data.code == 0) {
        render(data.data);
      } else {
        layer.msg(data.msg);
      }
    },
    error: function () {
      layer.msg("客户端请求有误");
    }
  });
}

function countDown() {
  var remainSeconds = $("#remainSeconds").val();
  var timeout;
  if (remainSeconds > 0) {//秒杀还没开始，倒计时
    $("#buyButton").attr("disabled", true);
    const d = remainSeconds / (3600 * 24) | 0 + " 天 ";
    const h = (remainSeconds /  3600) % 24 + " 小时 ";
    const m = (remainSeconds / 60) % 60 + " 分钟 ";
    const s = remainSeconds % 60 + " 秒"; 
    $("#seckillTip").html("秒杀倒计时：" + d + h + m + s);
    timeout = setTimeout(function () {
      $("#countDown").text(remainSeconds - 1);
      $("#remainSeconds").val(remainSeconds - 1);
      countDown();
    }, 1000);
  } else if (remainSeconds == 0) {//秒杀进行中
    $("#buyButton").attr("disabled", false);
    if (timeout) {
      clearTimeout(timeout);
    }
    $("#seckillTip").html("秒杀进行中");
  } else {//秒杀已经结束
    $("#buyButton").attr("disabled", true);
    $("#seckillTip").html("秒杀已经结束");
  }
}
</script>
</html>
